<template>
	<div class="LeftContainer">
		<div class="topL">
			{{title}}
		</div>
		<div class="mainL">
			<el-form
				:inline="true"
				:model="form"
				class="demo-form-inline"
			>
				<el-form-item>
					<el-select
						clearable
						filterable
						v-model="form.componentName"
						placeholder="--请选择渲染组件--"
						@change="handleCommand"
						size="small"
					>
						<el-option
							v-for="(item,index) in cmpNames"
							:key="index"
							:label="item.title"
							:value="item.name"
						></el-option>
					</el-select>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>
<script>
	// bus 相关文件（同级组件之间传值）
	import EventHandler from "../assets/EventHandler";
	export default {
		name: "LeftSelect",
		data() {
			return {
				title: "组件选择区域",
				cmpNames: [],
				form: {
					componentName: "",
				},
			};
		},
		mounted() {
			// 模拟后端请求到的数据
			this.cmpNames = [
				{ name: "ComponentA", title: "柱状图组件" },
				{ name: "ComponentB", title: "饼状图组件" },
				{ name: "ComponentC", title: "折线图组件" },
				{ name: "ComponentD", title: "散点图组件" },
				{ name: "ComponentE", title: "中国地图组件" },
			];
		},
		methods: {
			handleCommand(command) {
				EventHandler.$emit("setValue", command);
			},
		},
	};
</script>
<style lang="css" scoped>
	.LeftContainer {
		width: 100%;
		height: 460px;
		border-right: 1px solid white;
		background: #dcdfe6;
	}
	.topL {
		width: 100%;
		height: 40px;
		text-align: center;
		line-height: 40px;
		background: #c0c4cc;
		border-top: 1px solid white;
		font-size: 18px;
	}
	.mainL {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-top: 20px;
		padding-left: 5px;
	}
	.el-dropdown-link {
		cursor: pointer;
		color: #409eff;
	}
	.el-icon-arrow-down {
		font-size: 12px;
	}
</style>